<template>
  <div>
    <van-nav-bar title="工作台"/>
    <div id="tabTitle">
      <van-tabs v-model="activeName" @click="onItemClick" sticky color='#188DC1'
                title-active-color="#188DC1" title-inactive-color="#666666">
        <van-tab title="我的任务" name="apply"></van-tab>
        <van-tab title="我处理的" name="job"></van-tab>
      </van-tabs>
    </div>
    <div id="contentBody" class="contentBody">
      <div id="contentView">
        <div id="resultList">
          <van-list>
            <van-cell v-for="item in dataList" :key="item.index"
                      :id="item.bsncode" :title="item.name" is-link
                      :value="item.count" @click="showDetailInfo">
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  Tabs,
  List,
  Cell,
  Tag,
  NavBar,
  Toast
} from 'vant';
import { mapActions } from 'vuex';
import { queryJobList } from '@/libs/api';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      activeName: 'apply',
      dataList: [],
      qryParam: {}
    };
  },
  methods: {
    ...mapActions(['saveRoute']),
    onItemClick(name) {
      this.dataList = [];
      this.activeName = name;
      if (name === 'apply') {
        this.getJobInfo();
      } else {
        this.getHisInfo();
      }
    },
    showDetailInfo(obj) {
      let clickItem = {};
      this.dataList.forEach((item) => {
        if (item.bsncode === obj.currentTarget.id) {
          clickItem = item;
        }
      });
      console.log(clickItem);
      if (this.activeName === 'apply') {
        const route = { name: 'WorkBench', params: clickItem };
        this.saveRoute(route);
        this.$router.push(route);
      } else {
        this.$router.push({ name: 'HaveDone', params: clickItem });
      }
    },
    getJobInfo() {
      this.qryParam.cstNo = this.$store.state.loginUser.cichno;
      this.qryParam.hostNo = this.$store.state.loginUser.cino;
      this.qryParam.operNo = this.$store.state.loginUser.userId;
      this.qryParam.serviceName = 'Transfer_Q_readyCheckTransfer';
      queryJobList(this, this.qryParam).then((res) => {
        console.log(res);
        if (res.retCode === 'CIP0000000') {
          this.dataList = res.readyCheckList;
        }
        console.log(this.dataList.count);
        console.log('****************');
        console.log(this.dataList.size);
        if (this.dataList.length === 0) {
          Toast('您暂时没有要处理的任务');
        }
      });
    },
    getHisInfo() {
      this.dataList = [
        {
          name: '境内人民币汇款',
          bsncode: '99',
          count: ''
        },
        {
          name: '活期转定期',
          bsncode: '204',
          count: ''
        }
      ];
    }
  },
  mounted() {
    this.getJobInfo();
  }
};
</script>

<style>
  .contentBody{
    height: calc(100vh - 140PX);
    background-color: #f3f6f9;
    overflow-y:scroll;
  }
</style>
